<script setup>
import { onMounted, ref, inject } from 'vue'
import Image1 from '../assets/png/img/user.jpg' // 确保图片路径正确
import Image2 from '../assets/png/img/balance.png' // 确保图片路径正确
import Image3 from '../assets/png/img/warning.png' // 确保图片路径正确
import mov1 from '../assets/png/img/move.png' // 确保图片路径正确
import mov2 from '../assets/png/img/move2.png' // 确保图片路径正确
import yzImage from '../assets/png/img/yz.png' // 确保图片路径正确

const data_content = ref(null)
const pie_content = ref(null)
const line_content = ref(null)
let echarts = inject('echarts')
var myChartList, myChartPie, myChartLine
const allList = ref([
  {
    title: '业主人数',
    num: '2318',
    url: Image1
  },
  {
    title: '访问人数',
    num: '880',
    url: Image2
  },
  {
    title: '外来人数',
    num: '174',
    url: Image3
  }
])
const value = ref(1)

const list = ref([
  {
    title: '监控1:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控2:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控3:T9北侧',
    time: '08.12 18',
    type: '已消警'
  },
  {
    title: '监控4:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控5:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控6:T9北侧',
    time: '08:12:18',
    type: '已消警'
  },
  {
    title: '监控7:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控8:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控9:T9北们',
    time: '08:12:18',
    type: '已消警'
  }
])
const moveList = ref([
  {
    title: '星关广场云台',
    url: mov1
  },
  {
    title: '底商北侧',
    url: mov1
  },
  {
    title: '后山艺术空间',
    url: mov1
  },
  {
    title: 'T9后面',
    url: mov2
  },
  {
    title: '门口',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  }
])
let optionList = {
  //修改全部柱子的颜色
  // color: ['red'],
  //修改图表大小
  grid: {
    containLabel: true,
    bottom: '0rem',
    left: '0rem',
    right: '0rem',
    top: '35'
  },
  title: {
    text: '近一周访客超时楼栋分布',
    textStyle: {
      color: '#4671bc' // 设置标题颜色
    },
    left: '10%',
    top: '0%'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {},
  xAxis: {
    //设置坐标刻度标签
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3'],
    //设置坐标轴标签
    axisLabel: {
      fontSize: '0.125rem', // 字体大小
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  series: [
    {
      // name: '销量'
      type: 'bar',
      data: [
        {
          value: 10,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 50,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 390,
          itemStyle: {
            color: '#4c81dd'
          }
        },
        {
          value: 330,
          itemStyle: {
            color: '#38d9d0'
          }
        },
        {
          value: 230,
          itemStyle: {
            color: '#4c81dd'
          }
        }
      ]
    }
  ]
}
//指定饼图
let optionPie = {
  color: ['#5e63fb', '#41e8d7', '#aa5ce7', '#a0ea66'],
  graphic: {
    elements: [
      {
        type: 'image',
        left: '60.25rem',
        top: '50%',
        style: {
          image: yzImage, // 替换为你的图片路径
          width: 30, // 图片宽度
          height: 30 // 图片高度
        }
      }
    ]
  },
  title: [
    {
      text: '业主关怀',
      textStyle: {
        fontSize: '12px',
        color: '#fff'
      },
      top: '35%',
      left: '70.25rem',
      textAlign: 'center'
    }
  ],
  legend: {
    orient: 'vertical',
    left: '200rem',
    top: '25%',
    textStyle: {
      color: '#fff',
      fontSize: '.1625rem'
    }
    // itemWidth: 28, // 设置图例块的宽度
    // itemHeight: 20 // 设置图例块的高度
  },
  tooltip: {
    // 这里可以设置 tooltip 的其他属性
  },
  legendHoverLink: true,
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 40,
          name: '长期空置'
        },
        {
          value: 140,
          name: '长期未外出'
        },
        {
          value: 200,
          name: '小孩独自出门超时'
        },
        {
          value: 350,
          name: '老人独自出门超时'
        }
      ],
      radius: ['50', '75'],
      label: {
        show: false // 不显示标签
      },
      center: ['77.25', '50%']
    }
  ]
}
//指定折线图
let optionLine = {
  title: [
    {
      text: '近一月报警次数',
      left: '37rem', // 标题水平居中
      top: '0rem', // 标题在顶部
      textStyle: {
        fontSize: '.175rem', // 字体大小
        color: '#446fb8' // 字体颜色
      }
    },
    {
      text: '单位：次数/天',
      right: '-2rem', // 标题在右侧
      top: 'top', // 标题在顶部
      textStyle: {
        fontSize: '0.175rem', // 字体大小
        color: '#cccccc' // 字体颜色
      }
    }
  ],
  grid: {
    left: '0rem',
    top: '40rem',
    right: '10rem',
    bottom: '0rem',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6-27', '6-28', '6-29', '6-30', '7-1', '7-2', '7-3', '7-4', '7-5'],
    //设置坐标轴标签
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    },
    //设置坐标轴的线
    axisLine: {
      //不显示样式
      show: false
    }
  },
  yAxis: {
    //虚线
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1.5, // 线宽
        color: '#ccc', // 线颜色
        dashOffset: -30 // 设置虚线的偏移量，影响虚线间隔
      }
    },
    axisLabel: {
      // 字体大小
      fontSize: '0.125rem',
      color: '#87a0b9'
    }
  },
  lineStyle: {
    color: '#4a1b64'
  },
  series: [
    {
      data: [20, 29, 40, 33, 68, 55, 43, 33, 10],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4a1b64' }, // 渐变起始颜色
          { offset: 1, color: '#14435c' } // 渐变结束颜色
        ])
      },
      itemStyle: {
        color: '#cd6e6e',
        borderWidth: '2px'
      }
    }
  ]
}
onMounted(() => {
  myChartList = echarts.init(data_content.value)
  myChartList.setOption(optionList)
  myChartPie = echarts.init(pie_content.value)
  myChartPie.setOption(optionPie)
  myChartLine = echarts.init(line_content.value)
  myChartLine.setOption(optionLine)
})
window.addEventListener('resize', function () {
  myChartList.resize()
  myChartPie.resize()
  myChartLine.resize()
})
</script>
<template>
  <div class="security_layout">
    <div class="left">
      <div class="all shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>摄像头概述总览</div>
        </div>
        <div class="item_1">
          <img class="image" src="../assets/png/img/title.png" mode="" />
          <div class="text">
            <span class="s1">当前社区总人数</span>
            <span class="s2">12530</span>
          </div>
          <div class="text_2">
            <span class="s1">黑名单</span>
            <span class="s2">25</span>
          </div>
        </div>
        <div class="item_2">
          <div class="item_2_t" v-for="(item, index) in allList" :key="index">
            <div class="text">
              <!-- <img class="img" :src="item.url" alt="" /> -->
              <div class="title">{{ item.title }}</div>
            </div>
            <div style="color: #9dcef3; font-size: 0.175rem">{{ item.num }}</div>
          </div>
        </div>
      </div>

      <div class="list shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>报警信息列表</div>
        </div>
        <div class="content">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="left"></div>
            <div class="right">
              <div class="ct_1">
                <span>{{ item.title }}</span>
                <span
                  class="span"
                  style="color: #fff"
                  :class="{ b_1: item.type == '处理中', b_2: item.type == '已消警' }"
                  >{{ item.type }}</span
                >
              </div>
              <div class="ct_2">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_1 shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>黑名单数据</div>
        </div>
        <div class="content">
          <div class="item">
            <img class="av" src="../assets/png/img/user.png" alt="" />
          </div>
          <div class="item">
            <div class="text">近一个月出现黑名单次数</div>
          </div>
          <div class="item" style="height: 1rem">
            <div style="font-size: 0.5rem !important">754</div>
          </div>
        </div>
      </div>
      <div class="right2_sum shadow">
        <div class="right_2">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>超时访客数据</div>
          </div>
          <div class="content">
            <div ref="data_content" id="data_content"></div>
          </div>
        </div>
        <div class="right_3">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>超时访客数据</div>
          </div>
          <div class="content">
            <div ref="pie_content" id="pie_content"></div>
          </div>
        </div>
        <div class="right_4">
          <div class="title">
            <img class="image" src="../assets/png/img/titleImg.png" mode="" />
            <div>报警数据</div>
          </div>
          <div class="content">
            <div ref="line_content" id="line_content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/scss/test.scss');
.ml {
  margin-left: 0.175rem !important;
}
#pie_content {
  height: 1.875rem !important;
  width: 95% !important;
  margin-left: 0.855rem;
  position: relative;
}
</style>
